<template>
  <div class="resultFeedback">
    <el-col :offset="offsetWidth" :span="spanWidth" class="resultCard">
      <header class="flex items-center text-14px">
        <el-avatar :size="22" :src="headaImage" />
        <span class="mx-5px">{{ result.createName }}</span>
        <el-icon :size="14" class="mx-5px"><Clock /></el-icon>
        <span>{{ result.createTime }}</span>
      </header>
      <main class="mt-10px text-14px">
        {{ result.remark }}
        <div v-if="fileList.length" class="mt-10px">
          <span class="float-left mr-10px">附件:</span>
          <div class="text-14px float-left">
            <div
              v-for="(item, i) in fileList"
              :key="item.fileId"
              :class="{ 'mt-10px': i }"
            >
              <a style="color: #409eff" :href="item.url">{{
                item.origFileName
              }}</a>
            </div>
          </div>
          <div class="clear-both"></div>
        </div>
        <template v-if="result.children && result.children.length">
          <template v-for="item in result.children" :key="item">
            <Result :result="item" :spanWidth="22" :offsetWidth="0"></Result>
          </template>
        </template>
      </main>
    </el-col>
  </div>
</template>

<script setup>
import headaImage from '@/assets/images/icon/principal.png'
const props = defineProps({
  result: {
    type: Object,
    default: () => {}
  },
  spanWidth: {
    type: Number,
    default: 15
  },
  offsetWidth: {
    type: Number,
    default: 3
  }
})

const fileList = ref([])
watch(
  () => props.result,
  val => {
    if (val.dealFileName) {
      const origFileName = val.dealFileName.split(',')
      const url = val.dealFilePath.split(',')
      fileList.value = origFileName.map((v, i) => {
        const obj = {
          origFileName: v,
          url: url[i],
          fileId: v + url[i]
        }
        return obj
      })
    }
  },
  { immediate: true }
)
</script>

<style scoped lang="scss">
.resultFeedback {
  @apply mt-20px;
  .resultCard {
    @apply relative p-20px;
    border: 1px solid rgb(230, 223, 223);
    border-radius: 8px;
    box-shadow: 0px 0px 5px #ccc;
  }
}
</style>
